<template>
  <div>
    <uni-popup
      ref="emailChatRef"
      background-color="#fff"
      type="bottom"
      @change="popupChange"
    >
      <div class="page-content">
        <nav-bar title="邮件" leftIcon=""></nav-bar>
        <div class="pages-content">
          <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
            <div class="email-list-item" v-for="(chat, index) in chatList" :key="index">
              <div class="name">网名1</div>
              <div class="title">内容</div>
              <div class="email-content">{{ chat.xxnr }}</div>
              <div class="title">附件</div>
              <div class="annex">
                <img src="@/static/img/fish.jpg" alt="">
              </div>
            </div>
            <!-- <div class="email-list-item to-right">
              <div class="name">自己</div>
              <div class="title">内容</div>
              <div class="email-content">斯科拉涉及多方考虑撒旦记录卡撒旦解放开始dsfs的发射点发射点发生发士大夫</div>
              <div class="title">附件</div>
              <div class="annex">
                <img src="@/static/img/fish.jpg" alt="">
              </div>
            </div> -->
          </tm-sheet>
        </div>
        <div class="bom-btn">
          <div class="cancel bom-btn-item" @click="close">取消</div>
          <div class="sure bom-btn-item" @click="reply">回复</div>
        </div>
        <!-- <div class="bom-div">
          <tm-button theme="bg-gradient-red-accent" size="g" @click="reply">回复</tm-button>
        </div> -->
      </div>
    </uni-popup>
    <uni-popup
      ref="emailReplyRef"
      background-color="#fff"
      type="bottom"
    >
      <div class="page-content">
        <nav-bar title="回复" leftIcon=""></nav-bar>
        <div class="pages-content">
          <tm-sheet :shadow="24" :padding="[12,24]" :margin="[24,24]">
            <tm-form ref="formData">
              <tm-input :vertical="true" required :height="250" input-type="textarea" bg-color="grey-lighten-5" :maxlength="200"  title="详细内容" placeholder="请输入,不超过200字符"  v-model="reqData.xxnr" ></tm-input>
              <view class="py-12 px-24 mx-12 round-3 border-b-1 grey text" :class="tmVuetify.black ? 'bk' : ''">
                <text class="text-size-n text-weight-b ">添加附件</text><text class="text-grey text-size-xs px-10">(最多可以上传8张)</text>
              </view>
              <view class="py-32 mx-12">
                <tm-upload
                  ref="uploadRef"
                  color="grey"
                  :url="uploadUrl"
                  :max="1"
                  :filelist.sync="reqData.filelist"
                  autoUpload
                  :grid="4"
                ></tm-upload>
              </view>
            </tm-form>
          </tm-sheet>
        </div>
        <div class="bom-btn">
          <div class="cancel bom-btn-item" @click="replyClose">取消</div>
          <div class="sure bom-btn-item" @click="replySure">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import { uploadUrl } from '@/api/common/request-name.js'
import $global from '@/module/tipsGroup'
import navBar from '@/components/nav-bar/index.vue'
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmForm from '@/tm-vuetify/components/tm-form/tm-form.vue';
import tmInput from '@/tm-vuetify/components/tm-input/tm-input.vue';
import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
let that
export default {
  name: 'email-chat',
  components: {
    navBar,
    tmSheet,
    tmButton,
    tmForm,
    tmInput,
    tmUpload
  },
  props: {
    list: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      uploadUrl: uploadUrl,
      reqData: {},
      chatList: []
    }
  },
  methods: {
    open () {
      this.$refs.emailChatRef.open()
    },
    close () {
      that.$refs.emailChatRef.close()
    },
    popupChange (obj) {
      if (obj.show) {
        that = this
        this.$nextTick(() => {
          this.chatList = []
          this.chatList.push(this.list)
        })
      }
    },
    reply () {
      this.reqData = {
        filelist: [],
        xxnr: ''
      }
      this.$refs.emailReplyRef.open()
      this.$refs.uploadRef.getRect()
    },
    replyClose () {
      that.$refs.emailReplyRef.close() 
    },
    async replySure () {
      const { xxnr = '', filelist = [] } = this.reqData
      if (!xxnr) {
        $global.$toast('fail', '请输入主题内容')
        return
      }
      const sendData = {
        ...this.reqData,
        pro_id: this.chatList[this.chatList.length - 1].id
      }
      await this.$store.dispatch('fjOrHj', sendData)
      $global.$toast('success', '回复成功')
      this.replyClose()
      this.chatList.push(this.reqData)
    }
  }
}
</script>
<style scoped>

</style>